<!DOCTYPE html>
<html lang="en"
xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Taco Cloud Register</title>
    <link rel="stylesheet" th:href="@{/styles.css}"/>
</head>
<body>
<h1>Register</h1>
<img th:src="@{/images/TacoCloud.png}"/>

<form method="POST" th:action="@{/register}" id="registerForm" th:object="${registrationForm}">
    <div th:if="${#fields.hasErrors()}">
        <span class="validationError">
            Please correct the problems below and resubmit.
        </span>
    </div>
    <label for="username">Username: </label>
    <input type="text" th:field="*{username}" />
    <span class="validationError"
          th:if="${#fields.hasErrors('username')}"
          th:errors="*{username}">username Error</span>
    <br/>

    <label for="password">Password: </label>
    <input type="password" th:field="*{password}"/>
    <span class="validationError"
          th:if="${#fields.hasErrors('password')}"
          th:errors="*{password}">password Error</span>
    <br/>

    <label for="confirmPassword">Confirm password: </label>
    <input type="password" name="confirmPassword" id="confirmPassword"/>
    <span class="validationError"
          th:if="${#fields.hasErrors('confirmPassword')}"
          th:errors="*{confirmPassword}">confirmPassword Error</span>
    <br/>

    <label for="fullname">Full name: </label>
    <input type="text" th:field="*{fullname}"/>
    <span class="validationError"
          th:if="${#fields.hasErrors('fullname')}"
          th:errors="*{fullname}">fullname Error</span>
    <br/>

    <label for="street">Street: </label>
    <input type="text" th:field="*{street}"/><br/>

    <label for="city">City: </label>
    <input type="text" th:field="*{city}"/><br/>

    <label for="state">State: </label>
    <input type="text" th:field="*{state}"/><br/>

    <label for="zip">Zip: </label>
    <input type="text" th:field="*{zip}"/><br/>

    <label for="phone">Phone: </label>
    <input type="text" th:field="*{phone}"/>
    <span class="validationError"
          th:if="${#fields.hasErrors('phone')}"
          th:errors="*{phone}">phone Error</span>
    <br/>

    <input type="submit" value="Register"/>
</form>
</body>
</html>